﻿@model SocialPhotos.Web.Models.BaseViewModel
           
<div class="art-post">
    <div class="art-post-tl"></div>
    <div class="art-post-tr"></div>
    <div class="art-post-bl"></div>
    <div class="art-post-br"></div>
    <div class="art-post-tc"></div>
    <div class="art-post-bc"></div>
    <div class="art-post-cl"></div>
    <div class="art-post-cr"></div>
    <div class="art-post-cc"></div>
    <div class="art-post-body">
    <div class="art-post-inner art-article">

<!-- tabbed -->
            <div class='tabbed_content'>
                <div class='tabs'>
                    <div class='moving_bg'>
                        &nbsp;
                    </div>
                    <span class='tab_item'>My photos</span> <span class='tab_item'>Top rated</span>
                </div>
                <div class='slide_content'>
                    <div class='tabslider'>
                        <ul>
                            <li id="myPhoto">
                            </li>
                        </ul>
                        <ul>
                            <li id="topRates">
                                
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
            <div class="cleared">
            </div>
        </div>
        <div class="cleared">
        </div>
    </div>
</div>
@section Footer {
    <script>
        $(document).ready(function () {
            // setting the tabs in the sidebar hide and show, setting the current tab
            $('div.tabbed div').hide();
            $('div.t1').show();
            $('div.tabbed ul.tabs li.t1 a').addClass('tab-current');

            // SIDEBAR TABS
            $('div.tabbed ul li a').click(function () {
                var thisClass = this.className.slice(0, 2);
                $('div.tabbed div').hide();
                $('div.' + thisClass).show();
                $('div.tabbed ul.tabs li a').removeClass('tab-current');
                $(this).addClass('tab-current');
            });
        });

        

        var TabbedContent = {
            init: function () {

            },

            slideContent: function (obj) {
                var margin = $(obj).parent().parent().find(".slide_content").width();
                margin = margin * ($(obj).prevAll().size() - 1);
                margin = margin * -1;

                $(obj).parent().parent().find(".tabslider").stop().animate({
                    marginLeft: margin + "px"
                }, {
                    duration: 300
                });

            }
        }

        $(document).ready(function () {
            TabbedContent.init();
        });

        $(".tab_item").mouseover(function () {

            var background = $(this).parent().find(".moving_bg");

            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 300
            });

            TabbedContent.slideContent($(this));

        });

        GetUserPhoto('@Model.LoginUser.Id');
        GetTopRatedPhoto();

    </script>
}
@section HeaderScript {
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.core.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.widget.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.tabs.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/tabbedContent.js")"></script>
    
    @*<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>*@

    
}
